// 第一步：选项卡
let titleBtns = document.querySelectorAll('nav ul li a');
let views = document.querySelectorAll('section[id]');
titleBtns.forEach(function(v,i){
    v.addEventListener('click',function(){
        titleBtns.forEach(function(v2,i2){
            v2.classList.remove('active');
            views[i2].style.display = 'none';
        })
        this.classList.add('active');
        views[i].style.display = 'block';
    })
})

// 第二部：页面刚加载完成，拼接标签，将本地存储的已有的数据展示在表格中

// 2.1.获取本地存储的数据
let localValue = localStorage.getItem('keyTable');   // 如果这里能拿到值，肯定是数组转为字符串的形式；
let localArr = JSON.parse(localValue);    // 将本地存储的数据转化为json对象，便于之后处理（有可能为空或者是数组）；  
// 2.2判断本地存储中keyTable是否有对应的value值，
// 1）如果没有则不执行,那么后面的点击动作将是第一次给本地存储放数据，第一次房的时候会规定数据的格式；
// 2）如果有，则进行遍历，在这里如果有的话，那么存在形式肯定为第一次存放时规定的形式为：
/* keyTable = [
 *   {dateKey:date.value,contentKey:content.value}，
 *   {dateKey:date.value,contentKey:content.value}
 * ]
*/
if (localValue){   
    let tr = '';            
    localArr.forEach(function(v,i){
        tr += `
                <tr>
                    <td>${v.dateKey}</td>
                    <td>${v.contentKey}</td> 
                    <td><button data-id="i">删除</button></td>
                </tr>  
            `
    })
    document.querySelector('tbody').innerHTML = tr;
}

// 第三步：添加点击事件，将新输入的数据存入本地存储，且同时显示在表格中
let btn = document.querySelector('#submit');
btn.onclick = function(){
    let content = document.querySelector('#content');
    let date = document.querySelector('#date');

    // 3.0 判断：如果用户不输入内容，则弹出提示信息，且不会被提交！
    if (!content.value||!date.value ){
        alert('请填写内容后再提交！')
        return false;
    }
 
    // 3.1 方式一：动态添加到表格
    let tr = '';
    tr = `
            <tr>
            <td>${date.value}</td>
            <td>${content.value}</td> 
            <td><button>删除</button></td>
            </tr>  
        `
    document.querySelector('tbody').innerHTML += tr;
    

    // 3.2将新添加的数据放入本地存储  
    if(!localValue){        // 表示第一次添加
        // 规定数据需要存放在数组中，保存在本地存储，（第一次以后的所有数据都是以数组形式保存的）
        localArr = [];      
    }        
    localArr.push({dateKey:date.value,contentKey:content.value});
    // console.log(localArr);
    localStorage.setItem('keyTable',JSON.stringify(localArr));
    // localStorage.removeItem('keyTable');

    // 3.3将表单输入数据清空
    content.value = '';
    date.value = '';

     // 3.4关闭当前视图，打开表格视图
    views[1].style.display = 'none';
    titleBtns[1].classList.remove('active');
    views[0].style.display = 'block';
    titleBtns[0].classList.add('active');

    // 方式二：重新加载，目的是将重新第二步再执行一遍，将新加入的数据，也展示在表格中
    // location.reload();
}

// 第四步：点击删除，删除整行（事件委派），并且删除对应的本地存储的值
document.querySelector('tbody').onclick = function(e){
    if (e.target.nodeName.toLowerCase() === 'button') {
        // 当点击删除按钮时，弹出对话框，确认是否删除，点击确认则删除，反之，则相反
        if(confirm('您确定要删除吗？')){
            // 1.删除页面上的对应的行(方法二)
            e.target.parentNode.parentNode.remove();

            // 2.本地存储对应的数据删除
            // 2.1获取点击的删除按钮对应的两个两个td（兄弟元素）
            let contentTag = e.target.parentNode.previousElementSibling;
            let dateTag = e.target.parentNode.previousElementSibling.previousElementSibling;
            // 2.2遍历本地存储的数组内容，拿到了多个对象，每个对象对应一个tr。对象里面的两个属性值，对应两个td的内容
            localArr.forEach(function(v,i){
                // 2.3判断数组中的哪个对象的两个属性值，刚好和两个td的内容相等，则这个对象也应该被删除
                if(v.contentKey == contentTag.textContent && v.dateKey == dateTag .textContent){
                    localArr.splice(i,1);   // 删除这个对象
                };
            });
            // 2.4将更新后的数组，重新存入本地空间
            localStorage.setItem('keyTable',JSON.stringify(localArr))

            // 方法二
            // history.go(0);
        }
    }
}


